<template>
  <div>
    <!-- 这里要记住不能v-for绑定el-row -->
    <div v-for="(item, index) in lands" :key="item.landId" class="land">
      <!-- 第一条信息 -->
      <el-row>
        <!-- 土地部分 -->
        <el-col :span="6" class="landName">
          <img
            :src="item.landPic"
            class="landPic"
            @click="toggleStatus(index)"
          />
          <span>{{ item.landName }}</span>
        </el-col>
        <!-- 文字部分  -->
        <el-col :span="6" class="text1">
          <h1>所有者: {{ item.owner }}</h1>
          <h1>状态 :{{ item.landstatus }}</h1>
          <h1>耕作者:{{ item.farmer }}</h1>
        </el-col>
        <el-col :span="6" class="text2">
          <h1>土地位置:{{ item.position }}</h1>
        </el-col>
        <!-- 功能部分 -->
        <el-col :span="6" class="func">
          <el-button
            color="#4bc05d"
            :disabled="item.landstatus != '成熟'"
            @click="showDrawDiglog(index)"
            >领取</el-button
          >
          <!-- <el-button color="#4bc05d" 
                        @click="showDrawDiglog(index)">领取</el-button> -->
          <div></div>
          <el-button color="#4bc05d" @click="dialogVisibleService = true"
            >交流</el-button
          >
          <div></div>
          <el-button color="#4bc05d" @click="dialogVisibleDonate = true"
            >捐赠</el-button
          >
          <!-- <img src="@/assets/draw.png">
                    <img src="@/assets/comunicate.png">
                    <img src="@/assets/donate.png"> -->
        </el-col>
      </el-row>
      <el-collapse-transition style="border-top: solid 1px rgb(0, 0, 0)">
        <div v-show="status[index]">
          <el-steps :active="1" align-center class="step">
            <el-step title="播种" description="20xx/xx/xx" />
            <el-step title="半成熟" description="20xx/xx/xx" />
            <el-step title="成熟" description="20xx/xx/xx" />
            <el-step title="仓储" description="20xx/xx/xx" />
            <el-step title="运输" description="20xx/xx/xx" />
            <el-step title="查收" description="20xx/xx/xx" />
          </el-steps>
          <el-row class="statusPic">
            <img src="../assets/肥料图.jpeg" />
            <img src="../assets/逛逛其它图.png" />
            <img src="../assets/土地图.jpg" />
            <img src="../assets/仓储中图.png" />
            <img src="../assets/运输图.webp" />
            <img src="../assets/市民端图.jpg" />
          </el-row>
        </div>
      </el-collapse-transition>
    </div>
    <!-- 领取部分 -->
    <el-dialog
      v-model="dialogVisibleDraw"
      width="32%"
      :before-close="handleClose"
    >
      <div>
        <div class="Address">
          <h1>收货地址</h1>
          <span>{{}}</span>
        </div>
        <div class="Draw">
          <h1>
            领取数量
            <el-input-number
              v-model="num"
              :precision="2"
              :step="0.1"
              :max="10"
            />kg
          </h1>
        </div>
      </div>
    </el-dialog>
    
    <!-- 这里再加一条逛逛其他 -->
    <div class="browseOther">
      <div class="leftPart">
        <img class="landPic" src="../assets/backgroundImage.png" />
        <span>逛逛其他</span>
      </div>
      <el-button>刷新</el-button>
    </div>

    <!-- 土地捐赠部分 -->
    <el-dialog
      v-model="dialogVisibleDonate"
      width="30%"
      :before-close="handleClose"
      title="捐赠"
    >
      <div>
        <div class="Donate">
          <h1>
            数量
            <el-input-number
              v-model="num"
              :precision="2"
              :step="0.1"
              :max="10"
            />kg
          </h1>
        </div>
        <el-button class="donateBtn" @click="donate()">确认</el-button>
      </div>
    </el-dialog>
    <!-- 交流部分 -->
    <el-dialog
      v-model="dialogVisibleService"
      width="32%"
      :before-close="handleClose"
      style="background-color: #ffffff"
      :title="title"
    >
      <!-- 未实现：这里显示对话 -->
      <div class="service">
        <el-input v-model="textarea" type="textarea" :rows="7" placeholder="" />
        <div class="serviceFooter">
          <img src="../assets/语音.png" style="inline-block;margin-top:5px" />
          <input type="text" style="flex: 1; margin-left: 5px" />
          <el-button style="margin-left: 10px">确认</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ref } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";
const show = ref(true);
export default {
  name: "",
  components: {},
  data() {
    return {
      title: "客服" + "2038" + "号/农户",
      num: ref(1),
      showStatusBar: false,
      status: [false, false],
      drawStatus: true,
      dialogVisibleDraw: false,
      dialogVisibleDonate: false,
      dialogVisibleService: ref(false),
      lands: [
        {
          landId: "",
          landName: "土地A",
          landPic: require("@/assets/backgroundImage.png"),
          owner: "小明",
          landstatus: "成熟",
          farmer: "小黄一家",
          position: "田间",
        },
        {
          landId: "",
          landName: "土地B",
          landPic: require("@/assets/backgroundImage.png"),
          owner: "小明",
          landstatus: "种植",
          farmer: "小蓝一家",
          position: "山里",
        },
      ],
    };
  },
  methods: {
    // async getData() {
    //     try {
    //         const response = await axios.get("");
    //         this.lands = response.data;
    //     } catch (error) {
    //         console.log(error);
    //     }
    // }
    //获取数据长度
    // setStatus() {
    //     const length = this.lands.length;
    //     this.status = new array(length).fill(false);
    // },
    toggleStatus(index) {
      this.status[index] = !this.status[index];
    },
    showDrawDiglog(index) {
      this.dialogVisibleDraw = true;
    },
    donate() {
      ElMessage({
        message: "捐赠成功！",
        type: "success",
      });
    },
  },
  //从后端接口获取数据
  created() {
    // this.getData();
    // this.setStatus();
  },
  mounted() {},
};
</script>
<style lang="css" scoped>
.transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  background-color: red;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}

/* 土地部分 */
.land {
  border: solid 0.5px rgb(0, 0, 0);
  border-collapse: collapse;
}

.landName {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}

.landPic {
  height: 100px;
  width: 150px;
  margin-right: 20px;
  /* margin: 20px 0 0 190px; */
}

/* 文字部分 */
h1 {
  padding-left: 15px;
  font-size: 25px;
  font-weight: normal;
  margin-block-start: 0;
  margin-block-end: 0;
}

/* 逛逛其他 */
.browseOther{
  height: 130px;
   /* width: 100%;  */
   border: solid 1px black;
   /* display:flex; */
   /* justify-content: space-between; */
   align-items: center;
}

.browseOther .leftPart{
  margin-left:50px;
}


.browseOther .leftPart span{
  text-align: center;
  margin-bottom:20px;
  background-color: #4bbf5c;
}

.browseOther .el-button{
  margin-right:50px;
}

.text1 {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.text2 {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  margin-top: 10px;
}

/* 溯源状态栏 */
.statusPic {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.statusPic img {
  height: 50px;
  width: 80px;
  margin-bottom: 10px;
}

/* 功能部分 */
/* 这里记得适配优化 */
.func .el-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 10px 0 10px 190px;
  height: 30px;
  border-radius: 4px;
  color: white;
}

/* 交流功能 */
.service {
  margin-top: -20px;
}

.serviceFooter {
  display: flex;
  /* justify-content: center; */
  justify-content: space-around;
  margin-top: 8px;
}

.serviceFooter .el-button {
  background-color: #4bbf5c;
  color: white;
}

/* 捐赠功能 */
.Donate {
}

.donateBtn {
  background-color: #4bbf5c;
  color: white;
  margin-top: 20px;
  margin-left: 300px;
  font-size: 24px;
  font-weight: 100;
}

/* 进度条部分 */
.step {
  margin-top: 10px;
}
</style>
